<template>
  <TableView
    ref="tableView"
    :table-attrs="{ api: fetchList, descs: ['create_time'], dicOptions: [{ prop: 'type', dicType: 'budget_type' }] }"
    form-path="/asset/fyassetbudget/budgetForm/{id:-1}"
    :search-model="searchForm"
    :delete-api="batchDelete"
    :tree-listeners="{ 'node-click': onNodeClick }"
    :tree-attrs="{
      fetchApi: getYearTree,
      show: true,
      treeProps: { label: 'name', value: 'id' },
      'expand-first-node': true,
      lazy: false,
      customRootNode: { name: '全部', id: -1 }
    }"
    :toolbar-attrs="{
      buttons: ['slot', { del: permissions.budget_fyassetbudget_del, create: permissions.budget_fyassetbudget_add }]
    }">
    <template #toolbar-button>
      <ToolbarButton
        v-if="permissions.budget_fyassetbudget_export"
        type="primary"
        icon="el-icon-download"
        label="导出"
        @click="exportExcel()" />
      <ToolbarButton
        v-if="permissions.budget_fyassetbudget_export"
        type="primary"
        icon="el-icon-upload"
        label="导入"
        @click="$refs.excelUpload.show()" />
    </template>
    <template #columns>
      <TableColumn label="所属年度" prop="year" width="80" />
      <TableColumn label="预算序号" prop="number" clickable width="80" />
      <TableColumn label="预算分类" prop="type" clickable width="80" />
      <TableColumn label="开支单位" prop="expenditureFullname" />
      <TableColumn label="执行单位" prop="executionFullname" />
      <TableColumn label="责任人" prop="liableName" width="115" />
      <TableColumn label="预算金额" prop="amount" width="80" />
      <TableColumn label="完成时间" prop="completionDate" width="95" />
      <TableColumn label="限制合同执行" prop="limitThreshold" width="115" align="center">
        <template #default="{ row }">
          <ElTag>{{ row.limitThreshold === '0' ? '否' : '是' }}</ElTag>
        </template>
      </TableColumn>
      <TableColumn label="备注" prop="remarks" />
    </template>
    <template #search-form>
      <FormInput v-model="searchForm.year" label="所属年度" prop="year" />
      <FormInput v-model="searchForm.number" label="预算序号" prop="number" />
      <FormSelect v-model="searchForm.type" dict-type="budget_type" label="预算分类" prop="type" />
      <FormInput v-model="searchForm.expenditureFullname" label="开支单位" prop="expenditureFullname" />
      <FormInput v-model="searchForm.executionFullname" label="执行单位" prop="executionFullname" />
      <FormInput v-model="searchForm.liableName" label="责任人" prop="liableName" />
    </template>
    <!--excel 模板导入 -->
    <ExcelUpload
      ref="excelUpload"
      title="资产预算信息导入"
      :url="`${assetService}fyassetbudget/import`"
      :temp-url="`${assetService}fyassetbudget/local/budget.xlsx`"
      temp-name="资产预算信息.xlsx"
      @refreshDataList="refreshChange" />
  </TableView>
</template>

<script>
  import { mapState } from 'vuex'
  import { services } from '@/config'
  import { fetchList, getYearTree, batchDelete } from '@/api/asset/fyassetbudget'

  export default {
    name: 'BudgetView',

    data() {
      return {
        searchForm: {
          year: '',
          number: '',
          type: '',
          expenditureFullname: '',
          executionFullname: '',
          liableName: ''
        },
        assetService: services.assetService
      }
    },
    computed: {
      ...mapState('user', ['permissions'])
    },
    methods: {
      fetchList,
      batchDelete,
      getYearTree,
      refreshChange() {
        this.$refs.tableView.onSearchClick()
      },
      onNodeClick(node) {
        this.searchForm.year = node.id === -1 ? null : node.id
        this.$refs.tableView.onSearchClick()
      },
      //  导出excel
      exportExcel() {
        this.$downBlobFile(
          `${services.assetService}fyassetbudget/export`,
          this.searchForm,
          `预算管理${this.$dateFormat(new Date())}.xlsx`
        )
      }
    }
  }
</script>
